.workspace-folder-selector {
  display: flex;
  align-items: center;
  gap: var(--space-4, 8px);
  margin-top: 16px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));

  .selected-folder-path {
    overflow: hidden;
    color: var(--requestly-color-text-subtle);
    font-size: var(--requestly-font-size-sm, 12px);
  }
  .ant-btn.ant-btn-default {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid transparent;

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
    }
  }
}

.workspace-folder-preview-description {
  margin-top: 8px;
  color: var(--requestly-color-text-subtle);
  font-size: var(--requestly-font-size-sm);
}

.workspace-folder-preview {
  margin-top: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  height: 315px;
  padding: var(--space-6, 16px) var(--space-8, 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .preview-header {
    .preview-title {
      color: var(--alias-tokens-color-text-subtle, #bbb);
      font-size: var(--requestly-font-size-2xs, 9px);
      font-weight: 600;
      line-height: 13px; /* 144.444% */
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .preview-path {
      display: flex;
      align-items: center;
      gap: var(--space-4, 8px);
      margin: 12px 0;
      color: var(--requestly-color-text-subtle);
      font-size: var(--requestly-font-size-xs);

      svg {
        width: 14px;
        height: 14px;
      }
    }
  }

  &-content {
    border-left: 1px solid var(--requestly-color-white-t-10);
    margin-left: 6px;
    padding-left: 6px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &__new-additions-section {
      border-radius: 4px;
      border: 1px dashed var(--requestly-color-success, #0baa60);
      background: rgba(11, 170, 96, 0.1);
      padding: var(--space-2, 4px) var(--space-4, 8px);
      margin-right: 4px;
      position: relative;

      .preview-info-icon {
        position: absolute;
        top: 4px;
        right: 6px;
        color: var(--requestly-color-success-text, #6fdaa6);
      }
    }
  }

  .preview-folder-items {
    display: flex;
    flex-direction: column;
    gap: 8px;

    &__item {
      .preview-folder-item-content {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: var(--requestly-font-size-sm);
        color: var(--requestly-color-text-subtle);

        svg {
          width: 14px;
          height: 14px;
        }
      }
      &.new-workspace-item {
        .preview-folder-item-icon,
        .preview-folder-item-name {
          color: var(--requestly-color-success-text, #6fdaa6);
        }
      }
    }
  }

  .existing-contents-section {
    margin-top: 8px;
    display: flex;
    padding: var(--space-2, 4px) var(--space-4, 8px);
    flex-direction: column;
    gap: 8px;
  }
}
